<template>
  <div class="m-header">
    <div class="m-header-container">
      <div class="m-header-container-left">
        <a class="icon" @click.prevent><img height="40" src="../../assets/img/logo.png"></a>
        <ul class="header-icon" v-if="!isExam">
          <li v-if="isAccess(0)"><a href="#/">首页</a></li>
          <li v-if="isAccess(1)"><a href="#/company">公司</a></li>
          <li v-if="isAccess(2)" @click="gotoQuizzes"><a>测评</a></li>
          <li v-if="isAccess(3)" @click="gotoQuizzes"><a>测评管理</a></li>
        </ul>
      </div>
      <div class="m-header-container-right" v-if="!isExam">
        <ul class="header-icon" v-if="!userInfo">
          <li><a class="with-border" href="#/register">注册</a></li>
          <li style="margin:0"><a class="with-border" href="#/login">登录</a></li>
        </ul>
        <ul class="header-icon" v-else>
          <template v-if="userInfo && userInfo.loginType == 1">
            <li><a href="#/chat">消息</a></li>
            <li style="margin:0"><a @click="$router.push({ name: 'Resume' })">简历</a></li>
            <li class="personal-info">
              <a>{{ userInfo.realName }}
                <img width="26" :src="userInfo.thumb">
                <ul class="dropbox">
                  <li>
                    <a href="#/">
                      个人中心<div class="desc">搜索 推荐职位</div>
                    </a>
                  </li>
                  <li>
                    <a @click.prevent="$router.push({ name: 'Resume' })">
                      简历设置<div class="desc">编辑微简历</div>
                    </a>
                  </li>
                  <li><a href="#/applyer/status">投递状态</a></li>
                  <li><a href="#/chat">查看聊天</a></li>
                  <li style="margin-top:10px;">
                    <a @click.prevent="logout">注销</a>
                  </li>
                </ul>
              </a>
            </li>
          </template>
          <template v-if="userInfo && userInfo.loginType == 3">
            <li style="margin:0"><a href="#/chat">消息</a></li>
            <li class="personal-info">
              <a href="#/empl/interAssign">{{ userInfo.realName }}
                <img width="26" src="@/assets/img/default.png">
                <ul class="dropbox">
                  <li>
                    <a href="#/empl/interAssign">面试分配<div class="desc">按照职业查看投递的简历</div></a>
                  </li>
                  <li>
                    <a href="#/empl/interMgn">面试管理<div class="desc">对面试官进行管理</div></a>
                  </li>
                  <li>
                    <a href="#/empl/positionMgn">职位管理<div class="desc">对发布的职位进行管理</div></a>
                  </li>
                  <li style="margin-top:10px">
                    <a @click.prevent="logout">注销</a>
                  </li>
                </ul>
              </a>
            </li>
          </template>
          <template v-if="userInfo && userInfo.loginType == 2">
            <li class="personal-info">
              <a href="#/corp">{{ userInfo.realName }}
                <!-- <img width="26" :src="userInfo.thumb"> -->
                <ul class="dropbox">
                  <li>
                    <a
                      href="javascript:void(0)"
                      @click.prevent="$router.push({name: 'Corp'})">
                      公司管理
                      <div class="desc">修改公司信息</div>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0)"
                      @click.prevent="$router.push({name: 'EmplMgn'})">
                      员工管理
                      <div class="desc">管理能够招聘的员工</div>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0)"
                      @click.prevent="gotoQuizzes">
                      测评管理
                      <div class="desc">管理企业发布的问卷</div>
                    </a>
                  </li>
                  <li style="margin-top:10px;">
                    <a @click.prevent="logout">注销</a>
                  </li>
                </ul>
              </a>
            </li>
          </template>
          <template v-if="userInfo && userInfo.loginType == 4">
            <li class="personal-info">
              <a href="#/empl/interAssign">{{ userInfo.realName }}
                <img width="26" src="@/assets/img/sys.jpg">
                <ul class="dropbox">
                  <li>
                    <a @click.prevent="gotoQuizzes">测评管理<div class="desc">添加系统测评</div></a>
                  </li>
                  <li style="margin-top:10px;" @click="logout">
                    <a @click.prevent>注销</a>
                  </li>
                </ul>
              </a>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainHeader',
  props: ['isExam'],
  computed: {
    userInfo: {
      cache: false,
      get() {
        if (this.$store.getters['user/getUserInfo'].userToken !== null) {
          return this.$store.getters['user/getUserInfo'];
        }
        return null;
      },
    },
  },
  data() {
    return {
      thumbUrl: '/static/img/thumb1.a0e2b6e.jpg',
    };
  },
  methods: {
    logout() {
      sessionStorage.clear();
      this.$store.dispatch('user/clearUserInfo');
      this.$router.push({ name: 'Login' });
    },
    gotoQuizzes() {
      if (this.userInfo.loginType === 1) {
        this.$router.push({ path: '/quizz/applyer/corpPaper' });
      } else if (this.userInfo.loginType === 2) {
        this.$router.push({ path: '/quizz/corp/questionMgn' });
      } else if (this.userInfo.loginType === 4) {
        this.$router.push({ path: '/quizz/admin/questionMgn' });
      }
    },
    isAccess(route) {
      if (!this.userInfo) {
        if (route === 0 || route === 1) {
          return true;
        }
        return false;
      } else if (this.userInfo.loginType === 1) {
        if (route === 3) {
          return false;
        }
        return true;
      } else if (this.userInfo.loginType === 2) {
        if (route !== 3) {
          return false;
        }
        return true;
      } else if (this.userInfo.loginType === 3) {
        return false;
      } else if (this.userInfo.loginType === 4) {
        if (route === 3) {
          return true;
        }
        return false;
      }
      return false;
    },
  },
};
</script>

<style lang="less">
@import url(../../../static/style/site.vars.less);
.m-header {
  width: 100%;
  height: 50px;
  background: @site-black;
  .m-header-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .m-header-container-left {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &>.icon {
        margin-top: 5px;
      }
    }
    .m-header-container-right {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
    }
  }

  ul.header-icon {
    font-size: 0;
    height: 100%;
    margin-left: 15px;
    display: inline-block;
    &>li {
      height: 100%;
      display: inline-flex;
      align-items: center;
      list-style: none;
      color: #fff;
      font-size: 14px;
      margin: 0 20px;
      cursor: pointer;
      user-select: none;
      &:hover, &:active {
        color: @site-main !important;
      }
      &.personal-info:hover {
        .dropbox {
          display: block;
        }
      }
      &>a {
        transition: color linear .1s;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        &:hover, &:active {
          color: @site-main;
        }
        &.with-border {
          transition: color linear .1s;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 25px;
          width: 50px;
          border: 1px solid @site-main;
        }
        &>img {
          border-radius: 15px;
          margin-left: 15px;
        }
      }
    }
  }
  ul.dropbox {
    position: absolute;
    top: 50px;
    width: 234px;
    right: 10px;
    background: #F2F5FA;
    color: rgb(90, 90, 90);
    z-index: 1000;
    display: none;
    box-shadow: 0px 0px 15px -5px #999;
    &>li {
      list-style: none;
      padding: 10px;
      box-sizing: border-box;
      background: #fff;
      &>a {
        display: block;
        height: 100%;
        width: 100%;
        .desc {
          font-size: 12px;
          margin-top: 2px;
          color: rgb(206, 206, 206);
        }
        &:visited, &:link, &:active {
          color: rgb(90, 90, 90);
        }
      }
      &:hover {
        background: #F2F5FA;
      }
    }
  }
}
</style>
